/*
* Copyright (c) 2025 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including but not limited to the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to provide persons with access to the Software
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGE OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

<template>
  <div class='adaptive-layout'>
    <NavigationContainerVue
      :mode='mode'
      :navigationPageName='navigationPageName'
      :navBarWidth='navBarWidth'
      :navBarWidthRange='navBarWidthRange'
      :minContentWidth='minContentWidth'
      :navBarPosition='navBarPosition'
      :onNavigationModeChange='onNavigationModeChange'
    >
      <NavigationBarVue>
        <TabBarContainerVue>
          <TabBarContentVue>
            <div class='list-container'>
              <div class='container' :style='{ paddingTop: `${topAvoidArea}px`, height: `calc(100% - ${topAvoidArea}px)` }'>
                <!-- 头部标题区域 -->
                <div class='title-wrap'>
                  <div class='title-info'>
                    <div class='go-back' @click='goHome'>
                      <img
                        class='title-img'
                        src='../../assets/images/left.png'
                      />
                    </div>
                    <div class='title-link'>
                      <span class='title'>消息</span>
                    </div>
                  </div>

                  <div class='icon-wrap'>
                    <!-- 小屏搜索图标 -->
                    <template>
                      <img
                        class='title-img'
                        :src="require('../../assets/images/search.png')"
                        alt='搜索'
                      />
                      <img
                        class='title-img'
                        :src="require('../../assets/images/add.png')"
                        alt='添加'
                        :style="{ marginLeft: '8px' }"
                      />
                    </template>
                  </div>
                </div>
                <!-- 消息列表 -->
                <ul class='content message-list'>
                  <li
                    v-for='item in messageData'
                    :key='item.id'
                    class='message-item'
                    :class="{ 'item-active': activeItem.id === item.id }"
                    @click='handleMessageClick(item)'
                  >
                    <div class='item'>
                      <!-- 头像区域 -->
                      <div class='item-img-wrap'>
                        <img
                          class='item-img'
                          :src='item.avatar'
                          :alt='item.name'
                        />
                        <!-- 未读标记 -->
                        <div
                          v-if='item.unread'
                          class='unread-bubble-wrap'
                          :class="{
                            numerical: typeof item.unread === 'number',
                            dot: typeof item.unread !== 'number',
                          }"
                        >
                          <span class='unread-bubble'>{{ item.unread }}</span>
                        </div>
                      </div>
                      <!-- 消息内容区域 -->
                      <div class='item-content'>
                        <div class='content-main'>{{ item.name }}</div>
                        <div class='content-secondary'>{{ item.message }}</div>
                      </div>
                      <!-- 时间 -->
                      <div class='item-time'>{{ item.time }}</div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </TabBarContentVue>
          <TabBarVue
            :width='barWidth'
            :height='barHeight'
            bgColor='rgb(241, 243, 245)'
            :selectedColor='selectedColor'
            :unselectedColor='unselectedColor'
            :onTabItemClick='handleClickTable'
            value='0'
          >
            <TabBarItemVue
              v-for='(item, index) in navItems'
              :name='index'
              :key='index'
            >
              <div class='tab-center' :style='{ marginBottom: `${bottomAvoidArea}px` }'>
                <img
                  class='toolbar-icon'
                  :src='require(`@/assets/images/${item.icon}.svg`)'
                  :alt='item.title'
                />
                <div
                  :class="[
                    'toolbar-title',
                    index === 0 ? 'toolbar_info' : '',
                    { active: item.active },
                  ]"
                >
                  {{ item.title }}
                </div>
              </div>
            </TabBarItemVue>
          </TabBarVue>
        </TabBarContainerVue>
      </NavigationBarVue>
      <NavigationContentVue></NavigationContentVue>
    </NavigationContainerVue>
  </div>
</template>

<script lang='ts'>
import { BreakpointManager } from '@hadss/web_adaptive_layout_ui';
import {
  NavigationContainerVue,
  NavigationContentVue,
  NavigationBarVue,
  TabBarContainerVue,
  TabBarContentVue,
  TabBarVue,
  TabBarItemVue,
} from '@hadss/web_adaptive_layout_vue2';
import { messageData } from '../../mocks/mockData';
import { AvoidArea, AvoidAreaInfo, AvoidAreaType } from '@/common/windowCommon';

export default {
  name: 'MessageList',
  components: {
    NavigationContainerVue,
    NavigationContentVue,
    NavigationBarVue,
    TabBarContainerVue,
    TabBarContentVue,
    TabBarVue,
    TabBarItemVue,
  },
  data() {
    return {
      breakpointManager: new BreakpointManager(),
      unsubscribe: null,
      currentBp: 'sm',
      messageData: messageData,
      mode: 'Auto',
      navBarWidth: 570,
      selectedColor: 'rgb(10, 89, 247)',
      unselectedColor: 'rgba(0, 0, 0, 0.6)',
      navigationPageName: 'MessageList',
      navBarWidthRange: [260, 570],
      minContentWidth: 340,
      navBarPosition: 'Start',
      currentMode: 0,
      barHeight: {
        md: '56px',
        lg: '100%'
      },
      barWidth: {
        md: '100%',
        lg: '96px'
      },
      topAvoidArea: 0,
      bottomAvoidArea: 0,
      activeItem: {
        id: '11',
        name: '张晓萌',
        message: '好的，我明天过来',
        time: '13:55',
        avatar: require('../../assets/images/touxiang.svg'),
        unread: null,
      },
      navItems: [
        { icon: 'xiaoxi', title: '消息', active: true },
        { icon: 'txl', title: '通讯录', active: true },
        { icon: 'sjq', title: '社交圈', active: true },
        { icon: 'my', title: '我的', active: true },
      ],
    };
  },
  methods: {
    goHome() {
      if (this.currentMode === 'Split' && this.$route.path === '/messageList/detailContainer') {
        this.$router.go(-2);
      } else {
        this.$router.back();
      }
    },

    handleClickTable(tab) {
      if (tab.index === 0) {
        this.selectedColor = 'rgb(10, 89, 247)';
      } else {
        this.selectedColor = 'rgba(0, 0, 0, 0.6)';
      }
    },

    handleMessageClick(item: any) {
      this.activeItem = item;
      this.$store.commit('updateItem', item);
      if (this.$route.path === '/messageList') {
        this.$router.push({
          path: '/messageList/detailContainer',
          params: {
            activeItem: JSON.stringify(item),
          },
        });
      }
    },

    onNavigationModeChange(mode: string) {
      this.currentMode = mode;
      if (mode === 'Split' && this.$route.path !== '/messageList/detailContainer') {
        this.$router.push('/messageList/detailContainer');
      }
    },
    
    handleAvoidAreaChange(event: any) {
      const data = event.detail as AvoidAreaInfo;
      const areaType = data.type;
      if (areaType === AvoidAreaType.TYPE_SYSTEM) {
        this.topAvoidArea = (window as any).webClass?.pxToVp(data.area.topRect.height);
      }
      if (areaType === AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
        this.bottomAvoidArea = (window as any).webClass?.pxToVp(data.area.bottomRect.height);
        this.barHeight = {
          'md': `${56 + this.bottomAvoidArea}px`,
          'lg': '100%'
        };
      }
    },
  },
  mounted() {
    this.$store.commit('updateItem', this.activeItem);
    this.unsubscribe = this.breakpointManager.subscribeToBreakpoint(
      (bp: string) => {
        this.currentBp = bp;
        this.$store.commit('updateCurrentBp', this.currentBp);
      }
    );
    if ((window as any).webClass) {
      const webClass = (window as any).webClass;
      const topArea = webClass.getAvoidArea(AvoidAreaType.TYPE_SYSTEM) as AvoidArea;
      const bottomArea = webClass.getAvoidArea(AvoidAreaType.TYPE_NAVIGATION_INDICATOR) as AvoidArea;
      this.topAvoidArea = webClass.pxToVp(topArea.topRect.height);
      this.bottomAvoidArea = webClass.pxToVp(bottomArea.bottomRect.height);
      this.barHeight = {
        'md': `${56 + this.bottomAvoidArea}px`,
        'lg': '100%'
      };
    }
    window.addEventListener('avoidAreaChange', this.handleAvoidAreaChange);
  },

  beforeDestroy() {
    if (this.unsubscribe) {
      this.unsubscribe();
    }
    window.removeEventListener('avoidAreaChange', this.handleAvoidAreaChange);
  },
};
</script>

<style lang='less' scoped>
@import './MessageList.less';
</style>
